<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>组件的嵌套</h3>
        <my-comp1></my-comp1>
        <my-button></my-button>
    </div>

    <div id="app2">
        <!-- 
            my-comp1只在#app中使用
            <my-comp1></my-comp1> -->
        <my-button></my-button>
    </div>

    <script src="./vue.js"></script>

    <script>
        // 全局组件和局部组件

        // 局部组件:
        //   - 在某个vue实例中通过 components来定义的组件，就是局部组件
        //   - 它只能定义这个组件的区域中使用。 

        // 全局组件:
        //   - 通过Vue.component('组件名',配置项)定义的组件
        //   - 它可以在所有的Vue实例中的使用

        // 适用场景：
        //  方便于把代码共享到其它项目中使用

        // 定义格式
        Vue.component('MyButton',{
            template: `<button>全局组件</button>`
        })


        // 定义格式
        Vue.component('MyIcon',{
            template: `<div>全局组件MyIcon <my-button></my-button> </div>`
        })

        // 使用格式
        //    与局部组件一致

        new Vue({
            el: '#app',
            components: {
                // MyComp1 就是一个局部组件
                MyComp1:{
                    template: `<div> mycomp1 <my-icon></my-icon></div>`,
                   
                }
            }
        })

        new Vue({
            el:'#app2'
        })
    </script>
</body>
</html>